<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Meeting会议管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/styles/common.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        function passwordCheck() {
            var password = $("#password").val()
            var pwdInfo = $("#passwordInfo")
            pwdInfo.empty()
            console.log(password.length)
            if (password.length < 6 || password.length > 17) {
                pwdInfo.append("密码长度有误")
            }
        }


        function checkUser() {
            var username = $("#accountname").val();
            var phone = $("#phone").val();
            var email = $("#email").val();

            console.log(username)
            console.log(phone)
            console.log(email)
            console.log(123)

            $.ajax({
                url: "${pageContext.request.contextPath}/registerCheck",
                data: {
                    username: username,
                    phone: phone,
                    email: email
                },
                method: "post",
                success: function (res) {
                    console.log(res)
                    var status = parseInt(res)
                    $("#usernameLabel").empty()
                    $("#phoneLabel").empty()
                    $("#emailLabel").empty()

                    if ((status & 1) == 1) {
                        $("#usernameLabel").append("用户名已被占用")
                    }

                    if ((status & 2) == 2) {
                        $("#phoneLabel").append("手机号已被使用")
                    }

                    if ((status & 4) == 4) {
                        $("#emailLabel").append("电子邮箱已被占用")
                    }

                }
            })

        }

        function check() {
            var password = document.getElementById('password');
            var confirm = document.getElementById('confirm');
            var confirmInfo = document.getElementById('confirmInfo');
            if (password.value != confirm.value) {
                confirmInfo.innerHTML = '两次输入密码不一致';
            } else {
                confirmInfo.innerHTML = '';
            }
        }

        function checkCommit() {
            try {
                var redDIv = $("div[style='color: red']")
                console.log(redDIv)
                for (var i = 0; i < redDIv.length; ++i) {
                    if (redDIv[i].innerHTML != "") {
                        return false
                    }
                }
                $("input[type=text]").each(function () {
                    if ($(this).val() == "") {
                        return false
                    }
                })
                $("input[type=password]").each(function () {
                    if ($(this).val() == "") {
                        return false;
                    }
                })
                return true;
            } catch (e) {
                console.log(e)
                return false
            }
        }

    </script>
</head>
<body>
<%@ include file="top.jsp" %>
<div class="page-body">
    <%@ include file="leftMenu.jsp" %>
    <div class="page-content">
        <div class="content-nav">
            人员管理 > 员工注册
        </div>
        <form action="${pageContext.request.contextPath}/doRegister" method="post" onsubmit="return checkCommit()">
            <fieldset>
                <legend>员工信息</legend>
                <table class="formtable" style="width:50%">
                    <tr>
                        <td>姓名：</td>
                        <td>
                            <input name="employeeName" type="text"
                                   value="" id="employeename"
                                   maxlength="20" placeholder="请输入姓名"/>
                        </td>
                    </tr>
                    <tr>
                        <td>账户名：</td>
                        <td>
                            <input name="username" type="text" value=""
                                   id="accountname" onchange="checkUser()"
                                   maxlength="20" placeholder="请输入3-17位账户名"/>
                            <div style="color: red" id="usernameLabel"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input name="password" type="password" id="password" maxlength="20"
                                   onchange="passwordCheck()"
                                   placeholder="请输入6-20位的密码"/>
                            <div style="color: red" id="passwordInfo"></div>
                        </td>

                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td>
                            <input type="password" id="confirm" maxlength="20" onchange="check()" placeholder="请确认密码"/>
                            <div style="color: red" id="confirmInfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话：</td>
                        <td>
                            <input name="phone" type="text" value="" id="phone" onchange="checkUser()"
                                   maxlength="20" placeholder="请输入联系电话"/>
                            <div style="color: red" id="phoneLabel"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>电子邮件：</td>
                        <td>
                            <input name="email" type="text" value="" id="email" onchange="checkUser()"
                                   maxlength="20" placeholder="请输入电子邮箱"/>
                            <div style="color: red" id="emailLabel"></div>
                        </td>
                    </tr>
                    <td>所在部门：</td>
                    <td>
                        <select name="departmentID">
                            <c:forEach items="${departments}" var="dep">
                                <option value="${dep.departmentid}">${dep.departmentname}</option>
                            </c:forEach>
                        </select>
                    </td>
                    </tr>
                    <tr>
                        <td colspan="6" class="command">
                            <input type="submit" class="clickbutton" value="注册"/>
                            <input type="reset" class="clickbutton" value="重置"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</div>
<%@include file="down.jsp" %>
</body>
</html>